<template>
  <div style="display: flex;height: 100%">
    <div style="width: 60%">
      <div id="cardDiv">
        <el-card style="margin-bottom: 5px;" shadow="never" v-for="(item,index) in rows" :key="index">
          <!-- 头部 -->
          <div slot="header" class="headerDiv">
            <!-- 有头像展示没有显示默认头像 -->
            <div style="display: flex;flex-direction: row;align-items: center">
              <el-avatar size="large" v-if="baseInfo.avatar" :src="baseInfo.avatar"/>
              <el-avatar size="large" v-else :src="require('@/assets/xd/new/smallHeader.png')"/>
              <div style="margin: 0px 20px;font-size: 17px;font-weight: 800;"> {{ baseInfo.userName }}</div>
            </div>
            <div>{{ item.reportime ? item.reportime : '' }}</div>
          </div>
          <!-- 内容 -->
          <div>
            <el-text>{{ item.reportContent }}</el-text>
          </div>
          <!-- 图片 -->
          <div style="display: flex;flex-wrap: wrap;">
            <div style="margin: 5px" v-for="(image,index) in imageHanderFn(item.reportImages)" :key="index">
              <el-image
                style="width: 150px; height: 150px"
                :src="fileUrl+image"
                fit="fit"></el-image>
            </div>
          </div>
           <!-- 视频 -->
           <div v-if="item.reportVideo" style="display: flex;">
            <div style="margin: 5px" >
                <video style="width: 150px; height: 150px" controls  :src="item.reportVideo"></video>
            </div>
          </div>
          <!-- 关注按钮之类的其他东西 -->
          <div style="display:flex;flex-direction: row;justify-content: space-between;align-items: center">
            <div>
              <el-button size="small" icon="el-icon-thumb">点赞</el-button>
              <el-button size="small" icon="el-icon-paperclip">分享</el-button>
              <el-button size="small" icon="el-icon-star-off">收藏</el-button>
            </div>
            <div>
              <div style="color: #7a7777">设备型号:{{ item.reportEquip }}</div>
            </div>
          </div>
        </el-card>

        <!--        分页·-->

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPageChange"
                       :current-page="currentPage"
                       :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="totalDataCount" class="pagination">
        </el-pagination>

      </div>
    </div>
    <div style="flex: 1;margin-left: 15px">
      <pieChart></pieChart>
      <trendChart></trendChart>
    </div>
  </div>
</template>

<script>
import pieChart from "./echarts/pieChart.vue";
import trendChart from "./echarts/trendChart.vue";
import {detailsUser2} from "@/api/combatUser/importantUser";
import { getUserWb,listWBContentD,getMinioUrl} from "@/api/combat/userWb";
import { listUserzh, getUserzh, delUserzh, addUserzh, updateUserzh,getlistblogzh,getlistrelationzh } from "@/api/combat/userzh";

export default {
  props: {

    baseInfo: {
      type: Object,
      default: () => {
      }
    }
  },

  data() {
    return {
      id: '',
      userId:'',
      rows: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalDataCount: 0,
      fileUrl:'',
    }
  },
  watch: {},
  components: {
    pieChart,
    trendChart
  },
  mounted() {
    this.id = this.$route.query.id;
    this.userId = this.$route.query.userId;
    getMinioUrl().then(res=>{
      this.fileUrl=res.data
    })
    this.searchData();
  },
  methods: {
    imageHanderFn(imageList) {
      if (imageList) {
        return imageList.split(',');
      } else {
        return [];
      }
    },
    searchData() {
      //根据id查询数据
      let params = {
        userId: this.userId,
        pageSize: this.pageSize,
        pageNum: this.currentPage
      }
      getlistblogzh(params).then(res => {
        this.rows = res.rows;
        this.totalDataCount = res.total
      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.searchData();
    },
    handleCurrentPageChange(newPage) {
      this.currentPage = newPage;
      this.searchData();
    },


  }
}
</script>

<style scoped>
.headerDiv {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
}

.el-card__header {
  padding: 9px 20px !important;
}

#cardDiv {
  width: 100%;
  padding: 10px;
  height: 600px;
  background-color: rgba(232, 231, 231, 0.57);
  overflow-x: scroll;
}
</style>

